<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>战鹰VS末代裁决者 - 投票</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', -apple-system, system-ui, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            padding: 40px;
            max-width: 500px;
            width: 100%;
            text-align: center;
        }
        
        h1 {
            color: #2d3748;
            margin-bottom: 10px;
            font-size: 1.5em;
            line-height: 1.4;
        }
        
        .subtitle {
            color: #718096;
            margin-bottom: 30px;
            font-size: 0.9em;
        }
        
        .options {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 30px;
        }
        
        .option {
            padding: 16px 20px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #f8fafc;
            font-size: 1em;
        }
        
        .option:hover {
            border-color: #667eea;
            background: #f0f4ff;
            transform: translateY(-2px);
        }
        
        .option.selected {
            border-color: #667eea;
            background: #667eea;
            color: white;
        }
        
        .vote-btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 16px 32px;
            border-radius: 12px;
            font-size: 1.1em;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            margin-bottom: 20px;
        }
        
        .vote-btn:hover:not(:disabled) {
            background: #5a6fd8;
            transform: translateY(-2px);
        }
        
        .vote-btn:disabled {
            background: #cbd5e0;
            cursor: not-allowed;
            transform: none;
        }
        
        .results {
            display: none;
            margin-top: 30px;
        }
        
        .chart-container {
            height: 300px;
            margin: 20px 0;
        }
        
        .action-buttons {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }
        
        .action-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9em;
        }
        
        .export-btn {
            background: #48bb78;
            color: white;
        }
        
        .share-btn {
            background: #4299e1;
            color: white;
        }
        
        .message {
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: none;
        }
        
        .success {
            background: #c6f6d5;
            color: #22543d;
            border: 1px solid #9ae6b4;
        }
        
        .error {
            background: #fed7d7;
            color: #742a2a;
            border: 1px solid #feb2b2;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>战鹰需要几天才能打过末代裁决者？</h1>
        <div class="subtitle">请选择您的预测，每个IP只能投票一次</div>
        
        <div class="message" id="message"></div>
        
        <div class="options" id="options">
            <div class="option" data-value="2天">2天</div>
            <div class="option" data-value="3天">3天</div>
            <div class="option" data-value="5天">5天</div>
            <div class="option" data-value="打不过">打不过</div>
        </div>
        
        <button class="vote-btn" id="voteBtn" disabled>提交投票</button>
        
        <div class="results" id="results">
            <h2>当前投票结果</h2>
            <div class="chart-container">
                <canvas id="resultChart"></canvas>
            </div>
            <div class="action-buttons">
                <button class="action-btn export-btn" id="exportBtn">导出Excel</button>
                <button class="action-btn share-btn" id="shareBtn">分享到QQ群</button>
            </div>
        </div>
    </div>

    <script>
        // 初始化投票数据
        let voteData = {
            '2天': 0,
            '3天': 0,
            '5天': 0,
            '打不过': 0
        };

        // 模拟已投票IP存储（实际应用中应该使用服务器端存储）
        const votedIPs = new Set();
        
        // 检查是否已经投过票
        function hasVoted() {
            return localStorage.getItem('hasVoted') === 'true';
        }

        // 模拟获取客户端IP（实际应用中应该从服务器获取真实IP）
        function getClientIP() {
            return 'user_' + Math.random().toString(36).substr(2, 9);
        }

        let selectedOption = null;
        let chart = null;

        // 选项选择事件
        document.querySelectorAll('.option').forEach(option => {
            option.addEventListener('click', function() {
                if (hasVoted()) {
                    showMessage('您已经投过票了！', 'error');
                    return;
                }
                
                document.querySelectorAll('.option').forEach(opt => {
                    opt.classList.remove('selected');
                });
                
                this.classList.add('selected');
                selectedOption = this.getAttribute('data-value');
                document.getElementById('voteBtn').disabled = false;
            });
        });

        // 提交投票
        document.getElementById('voteBtn').addEventListener('click', function() {
            if (!selectedOption || hasVoted()) {
                showMessage('请先选择投票选项！', 'error');
                return;
            }

            const clientIP = getClientIP();
            
            // 模拟IP检查
            if (votedIPs.has(clientIP)) {
                showMessage('该IP地址已经投过票了！', 'error');
                return;
            }

            // 记录投票
            votedIPs.add(clientIP);
            localStorage.setItem('hasVoted', 'true');
            
            // 更新投票数据
            voteData[selectedOption]++;
            
            // 显示结果
            showResults();
            showMessage('投票成功！感谢您的参与。', 'success');
        });

        // 显示消息
        function showMessage(text, type) {
            const messageEl = document.getElementById('message');
            messageEl.textContent = text;
            messageEl.className = `message ${type}`;
            messageEl.style.display = 'block';
            
            setTimeout(() => {
                messageEl.style.display = 'none';
            }, 3000);
        }

        // 显示投票结果
        function showResults() {
            document.getElementById('options').style.display = 'none';
            document.getElementById('voteBtn').style.display = 'none';
            document.getElementById('results').style.display = 'block';
            
            renderChart();
        }

        // 渲染饼图
        function renderChart() {
            const ctx = document.getElementById('resultChart').getContext('2d');
            
            if (chart) {
                chart.destroy();
            }
            
            const totalVotes = Object.values(voteData).reduce((a, b) => a + b, 0);
            
            chart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: Object.keys(voteData).map(key => `${key} (${voteData[key]}票)`),
                    datasets: [{
                        data: Object.values(voteData),
                        backgroundColor: [
                            '#FF6B6B',
                            '#4ECDC4',
                            '#45B7D1',
                            '#96CEB4'
                        ],
                        borderWidth: 2,
                        borderColor: '#fff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                usePointStyle: true
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    const percentage = totalVotes > 0 ? 
                                        ((value / totalVotes) * 100).toFixed(1) : 0;
                                    return `${label}: ${percentage}%`;
                                }
                            }
                        }
                    }
                }
            });
        }

        // 导出Excel
        document.getElementById('exportBtn').addEventListener('click', function() {
            const totalVotes = Object.values(voteData).reduce((a, b) => a + b, 0);
            let csvContent = "选项,票数,百分比\\n";
            
            Object.keys(voteData).forEach(key => {
                const percentage = totalVotes > 0 ? 
                    ((voteData[key] / totalVotes) * 100).toFixed(1) : 0;
                csvContent += `${key},${voteData[key]},${percentage}%\\n`;
            });
            
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);
            
            link.setAttribute('href', url);
            link.setAttribute('download', '投票结果.csv');
            link.style.visibility = 'hidden';
            
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            showMessage('数据已导出为CSV文件！', 'success');
        });

        // 分享到QQ群
        document.getElementById('shareBtn').addEventListener('click', function() {
            const shareUrl = window.location.href;
            const shareText = '快来参与投票：战鹰需要几天才能打过末代裁决者？';
            
            // QQ群分享链接
            const qqShareUrl = `https://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(shareText)}`;
            
            window.open(qqShareUrl, '_blank', 'width=600,height=400');
            
            showMessage('已打开QQ分享界面！', 'success');
        });

        // 初始化页面状态
        if (hasVoted()) {
            showResults();
        }
    </script>
</body>
</html>